<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表
      </el-button>
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px">
            <el-form-item label="被授人员:">
              <div v-if="!optionPage">
                <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">被授人员</el-button>
                <div>
                  <el-tag
                      :key="tag"
                      v-for="(tag,index) in dynamicTags"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(index,tag)"
                      class="mr-10"
                  >{{ tag }}
                  </el-tag>
                </div>
              </div>
              <div v-else>
                {{optionPage.user_name}}
              </div>
            </el-form-item>
            <el-form-item label="被授日期:">
              <el-select v-model="dayOption" placeholder="日期">
                <el-option :label="item" :value="item" v-for="(item, index) in dayList"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当日时段:">
              <el-select v-model="timeOption" placeholder="时间段">
                <el-option :label="item.stringOption" :value="item.id" v-for="(item, index) in timeList"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="16">
                <el-form-item label="日程内容:">
                  <el-input v-model="infoForm.title" placeholder="日程内容" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="友情提醒:">
                  <el-input v-model="infoForm.remind" placeholder="日程内容" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="small">确认提交</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
              <el-col :span="8"></el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--    <teacherMultiple :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"-->
    <!--                     :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></teacherMultiple>-->
    <getAuthorizedPerson :visible.sync="studentVisible" @getUser="studentFn"
                         :dynamicTagsArray="dynamicTagsArray"></getAuthorizedPerson>
  </div>
</template>

<script>
import getAuthorizedPerson from '@/components/dialog/getAuthorizedPerson.vue'

export default {
  components: {
    getAuthorizedPerson
  },
  data () {
    return {
      infoForm: {
        title: '', // 标题
        list: [], //
        user_ids: '',
        remind: ''
      },
      // 表单验证
      rules: {
        vote_name: [
          {required: true, message: '填写投票名称', trigger: 'blur'}
        ]
      },
      // 限制时间选择
      pickerOptions1: {
        disabledDate (time) {
          // return time.getTime() < Date.now() - 8.64e7
        }
      },
      option: [''],
      studentVisible: false,
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      dayList: [], // 日期列表
      timeList: [], // 时间段
      dayOption: '',
      timeOption: '',
      optionPage: ''
    }
  },
  created () {
    this.getDayListFn()
    console.log('this.$route.query.optionData:', this.$route.query.optionData)
    if (this.$route.query.optionData) {
      this.optionPage = JSON.parse(this.$route.query.optionData)
      this.infoForm.user_ids = this.optionPage.user_id
    }
  },
  mounted () {
  },
  methods: {
    getDayListFn () {
      // 日期
      this.$fetch(this.api.schedule.scheduleTime, {}).then((response) => {
        if (response.code === 0) {
          this.dayList = response.list
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
      // 时间段
      this.$fetch(this.api.schedule.scheduleHour, {status: 1}).then((response) => {
        if (response.code === 0) {
          for (let i in response.list) {
            response.list[i].stringOption = response.list[i].start_time + '-' + response.list[i].end_time
          }
          this.timeList = response.list
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onEditorReady (editor) {
    },
    onAdd () {
      this.infoForm.option.push('')
    },
    onDetel (index) {
      this.infoForm.option.splice(index, 1)
    },
    onSubmit () {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      console.log('数据提交', this.infoForm)
      // dayOption: '',
      //     timeOption: ''
      // infoForm: {
      //   title: '', // 标题
      //       list: [], // time-日期;hour_id-时间id
      //       user_ids: ''
      // },

      if (!this.infoForm.user_ids) {
        this.$message({
          message: '请选择日程职工',
          type: 'error'
        })
        return
      }
      if (!this.dayOption) {
        this.$message({
          message: '请选择日程日期',
          type: 'error'
        })
        return
      }
      if (!this.timeOption) {
        this.$message({
          message: '请选择日程时间段',
          type: 'error'
        })
        return
      }
      if (!this.infoForm.title) {
        this.$message({
          message: '请选择日程内容',
          type: 'error'
        })
        return
      }

      this.infoForm.list = JSON.stringify([{time: this.dayOption, hour_id: this.timeOption}])
      this.$post(this.api.schedule.scheduleInviter, this.infoForm).then(res => {
        if (res.code === 0) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.infoForm = {
            title: '', // 标题
            list: [], // time-日期;hour_id-时间id
            user_ids: '',
            remind: ''
          }
          if (this.$route.query.optionData) {
            this.infoForm.user_ids = this.optionPage.user_id
          }
          this.dynamicTags = []
          this.dynamicTagsId = []
          this.dynamicTagsArray = {}
          this.dayOption = ''
          this.timeOption = ''
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    chooseStudent () {
      // 获取教职工人员
      this.studentVisible = true
    },
    studentFn (option) {
      for (let i in option) {
        this.dynamicTags.push(option[i].users.realname) //  循环的人名
        this.dynamicTagsId.push(option[i].user_id) // 用户id
        this.dynamicTagsArray = option
      }
      this.infoForm.user_ids = this.dynamicTagsId.join(',')
      this.studentVisible = false
    },
    handleClose (index, option) {
      for (let i in this.dynamicTagsArray) {
        if (Number(this.dynamicTagsArray[i].user_id) === Number(this.dynamicTagsId[index])) {
          delete this.dynamicTagsArray[i] // 去除选中的人
        }
      }
      this.dynamicTags.splice(index, 1)
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.user_ids = this.dynamicTagsId.join(',')
    },
    backlist () {
      this.$router.go(-1)
    }
  }
}
</script>
